<template>
	<div>
		<div style="position: absolute;left: 53px;top: 16px;">
			<img src="../assets/logo.png" />
		</div>
		<div style="position: absolute;top: 38px;right: 66px;font-size: 22px;color: white;">
			<div style="text-align: right;">
				<span v-text="nowTimeHM"></span>
				<span v-text="pmOrAm"></span>
			</div>
			<div style="text-align: right;font-size: 16px;font-weight: 300;">
				<span v-text="nowWeek"></span>
				<span v-text="nowTimeYMD"></span>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	export default {
		name: 'Header',
		data() {
			return {
				nowTimeYMD: 0,
				nowTimeHM: 0,
				pmOrAm: 0,
				nowTime: new Date(), // 当前时间
				nowWeek: '星期几', // 星期几
			}
		},
		beforeCreate() { // 创建 vue 实例之前
			_this = this;
		},
		watch: {

		},
		mounted() {
			this.nowTimes(); // 动态计算时间
		},
		methods: {
			timeFormate(timeStamp) {
				let year = new Date(timeStamp).getFullYear();
				let month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1;
				let date = new Date(timeStamp).getDate() < 10 ? "0" + new Date(timeStamp).getDate() : new Date(timeStamp).getDate();
				let hh = new Date(timeStamp).getHours() < 10 ? "0" + new Date(timeStamp).getHours() : new Date(timeStamp).getHours();
				let mm = new Date(timeStamp).getMinutes() < 10 ? "0" + new Date(timeStamp).getMinutes() : new Date(timeStamp).getMinutes();
				let ss = new Date(timeStamp).getSeconds() < 10 ? "0" + new Date(timeStamp).getSeconds() : new Date(timeStamp).getSeconds();
				this.nowTimeYMD = year + "/" + month + "/" + date;
				this.nowTimeHM = hh + ":" + mm;
				if(hh < 13) { // 计算 AM 和 PM
					this.pmOrAm = 'AM';
				} else {
					this.pmOrAm = 'PM';
				}
				let week = new Array("日", "一", "二", "三", "四", "五", "六");
				let day = new Date().getDay();
				this.nowWeek = "星期" + week[day];
			},
			nowTimes() {
				this.timeFormate(new Date());
				setInterval(this.nowTimes, 1000);
				this.clear()
			},
			clear() {
				clearInterval(this.nowTimes)
				this.nowTimes = null;
			}
		}
	}
</script>

<style lang="less" scoped>

</style>